<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="./主页.css">
    <link href="//unpkg.com/layui@2.9.21/dist/css/layui.css" rel="stylesheet">
</head>

<body>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>

    <div class="box">

        <div class="left1">
            <div class="touxiang"><img
                    src="https://tse4-mm.cn.bing.net/th/id/OIP-C.5Fis67R_eOy4yqXc2Qf3gwHaHa?w=204&h=202&c=7&r=0&o=5&dpr=1.5&pid=1.7">
            </div>
            <div class="mingzi">黑黑的啊</div>
        </div>

        <div class="left2">
            <div class="yibiaopan">仪表盘</div>
            <div class="jiangshiguanli">讲师管理</div>
        </div>

        <div class="right">
            <div class="right-top">
                <span>讲师管理系统</span>
                <div class="grzx">个人中心</div>
                <div class="tc">退出</div>
            </div>

            <div class="right-bottom">
                <!-- 讲师列表 -->
                <div class="liebiao show">
                    <div class="one"><span>讲师管理</span>&emsp;/&emsp;讲师列表</div>
                    <div class="two"><button onclick="tj()">添加讲师</button></div>
                    <div class="three">
                        <div class="three1"><input type="text" class="ss"><button onclick="sousuo()">搜索</button></div>
                        <div class="three2">
                            <table border="1px #fffdfd solid;" style="width: 1309px;border-spacing: 0px">
                                <thead>
                                    <tr>
                                        <td>编号</td>
                                        <td>姓名</td>
                                        <td>昵称</td>
                                        <td>出生日期</td>
                                        <td>性别</td>
                                        <td>手机号码</td>
                                        <td style="width: 220px;">操作</td>
                                    </tr>
                                </thead>
                                <tbody id="data-list">

                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div id="pagination">
                        <button onclick="fetchData(currentPage - 1)">上一页</button>
                        <span id="current-page">1</span> / <span id="total-pages">1</span>
                        <button onclick="fetchData(currentPage + 1)">下一页</button>
                    </div>

                </div>
            </div>

            <!-- 查看 -->
            <div class="chakan">
                <div class="one">讲师信息<span class="cha">❌</span></div>
                <div class="two">
                    <table border="1px" style="border-spacing: 0px; width: 858px; height: 500px;">
                        <tbody>
                            <tr>
                                <td>姓名:</td>
                                <td class="a1">李清照123</td>
                                <td>职位:</td>
                                <td colspan="2">讲师</td>
                                <td rowspan="4">
                                    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.5Fis67R_eOy4yqXc2Qf3gwHaHa?w=204&h=202&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                                        style="width: 200px;height: 200px;">
                                </td>
                            </tr>
                            <tr>
                                <td>花名:</td>
                                <td class="a2">易安居士</td>
                                <td>出生日期:</td>
                                <td colspan="2" class="a3">1970-01-01</td>
                            </tr>
                            <tr>
                                <td>性别:</td>
                                <td>女</td>
                                <td>入职日期:</td>
                                <td colspan="2">2015-02-14</td>
                            </tr>
                            <tr>
                                <td>手机号码:</td>
                                <td colspan="2" class="a4"></td>
                                <td>邮箱:</td>
                                <td>liqingzhao@itcast.cn</td>
                            </tr>
                            <tr>
                                <td>籍贯:</td>
                                <td colspan="5">山东省 济南市 章丘市</td>
                            </tr>
                            <tr>
                                <td colspan="6">
                                    <textarea style="width: 850px;height: 200px;">        听着志愿者们声情并茂、入情入理的讲述，仿佛回到了百年前那段风雨如晦、激情燃烧的岁月。彼时的中国，受尽列强凌辱、濒临危亡，犹如孤海扁舟，“上有风雨之摧淋，下有狂涛之荡激”。
        如何救民于水火，挽民族之沉沦，扶大厦之将倾，建崭新之国家？这是自1840年以来多少仁人志士孜孜以求的探寻。洋务运动、戊戌变法、辛亥革命……一次次轰轰烈烈的维新求变，祛除不了颓废衰败的病根，未能改变中国沦为半封建半殖民地的悲惨命运。
        洪流滚滚、百折不挠。1917年，十月革命的一声炮响，使处于迷茫中的中国先进知识分子看到了曙光，他们急需了解掌握马克思主义。


                                                                                                                                                                  ————《共产党宣言》
                                    </textarea>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 编辑页面 -->
            <div class="bianji">
                <div class="one"><span>讲师管理</span>&emsp;/&emsp;讲师编辑</div>
                <div class="two">
                    &emsp;&emsp;姓名&emsp;&emsp;<input type="text" class="bianji1"><br>
                    <br>
                    出生日期&emsp;&emsp;<input type="text" class="bianji2"><br>
                    <br>
                    &emsp;&emsp;性别&emsp;&emsp;<input type="radio" name="sex" value="0" class="inp1">男&emsp;&emsp;<input
                        type="radio" name="sex" value="1" class="inp1">女<br>
                    <br>
                    <button onclick="bianji()">编&nbsp;辑</button>
                </div>
            </div>

            <!-- 添加页面 -->
            <div class="tianjia">
                <div class="one"><span>讲师管理</span>&emsp;/&emsp;讲师添加</div>
                <div class="two">
                    姓名&emsp;&emsp;<input type="text" class="tj1"><br>
                    <br>
                    昵称&emsp;&emsp;<input type="text" class="tj2"><br>
                    <br>
                    生日&emsp;&emsp;<input type="text" class="tj3"><br>
                    <br>
                    手机号&emsp;<input type="text" class="tj4"><br>
                    <br>
                    类型&emsp;&emsp;<select class="tj5">
                        <option value="1">讲师</option>
                        <option value="2">班主任</option>
                    </select><br><br>
                    性别&emsp;&emsp;<input type="radio" name="sex" value="0" class="inp2">男&emsp;&emsp;<input type="radio"
                        name="sex" value="1" class="inp2">女<br>
                    <button onclick="tianjia()">添加</button>
                </div>
            </div>

            <!-- 添加个人中心 -->
             <div class="add_zx">
                <div class="one">
                    姓&emsp;&emsp;名&emsp;&emsp;<input type="text"><br>
                    头&emsp;&emsp;像&emsp;&emsp;<input type="text"><br>
                    昵&emsp;&emsp;称&emsp;&emsp;<input type="text"><br>
                    性&emsp;&emsp;别&emsp;&emsp;<input type="radio" value="0" name="sex" class="inp4">男&emsp;<input type="radio" value="1" name="sex" class="inp4">女<br>
                    出生日期&emsp;&emsp;<input type="text"><br>
                    手机号码&emsp;&emsp;<input type="text"><br>
                    电子邮箱&emsp;&emsp;<input type="text"><br>
                    入职日期&emsp;&emsp;<input type="text"><br>
                    <button onclick="add_zx()">确定</button>
                    <button onclick="yingyong()">应用</button>
                </div>
             </div>

            <!-- 查看个人中心 -->
            <div class="zhongxin">
                <div class="one">
                    姓&emsp;&emsp;名&emsp;&emsp;<span class="inps6"></span><br>
                    头&emsp;&emsp;像&emsp;&emsp;<img
                        src="https://tse4-mm.cn.bing.net/th/id/OIP-C.5Fis67R_eOy4yqXc2Qf3gwHaHa?w=204&h=202&c=7&r=0&o=5&dpr=1.5&pid=1.7" class="tou"><br>
                    昵&emsp;&emsp;称&emsp;&emsp;<input type="text" class="inps inps1"><br>
                    性&emsp;&emsp;别&emsp;&emsp;<input type="radio" value="0" class="inp3" checked>男&emsp;<input type="radio"
                        value="1" class="inp3">女<br>
                    出生日期&emsp;&emsp;<input type="text" class="inps inps2"><br>
                    籍&emsp;&emsp;贯&emsp;&emsp;<select>
                        <option>河南省</option>
                    </select>&emsp;<select>
                        <option>郑州市</option>
                    </select>&emsp;<select>
                        <option>荥阳市</option>
                    </select><br>
                    手机号码&emsp;&emsp;<input type="text" class="inps inps3"><br>
                    电子邮箱&emsp;&emsp;<input type="text" class="inps inps4"><br>
                    入职日期&emsp;&emsp;<input type="text" class="inps inps5"><br>
                    个人介绍&emsp;&emsp;<textarea style="width: 400px;height: 80px;" class="inps6">        
        黑黑的不是黑色入,不是黑入🥚，是搁那蛋！</textarea><br>
                    <button onclick="qd()"></button>
                </div>
            </div>

            <!-- 仪表盘 -->
             <div class="ybp">
                <div class="one">
                    <div id="main"></div>
                </div>
             </div>




        </div>

    </div>

    </div>

    <script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>
    <script src="//unpkg.com/layui@2.9.21/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="./主页.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>

</body>

</html>

